<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'product.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>工单工序</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="da-list-container ">
      <div class="da-list-header">
        <d-row>
          <d-col [dSpan]="24">
            <div class="d-input">
              <div class="inputIn">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="工单号" name="工单号" class="me-2"
                  [(ngModel)]="JobOrderNum">
                <d-select [placeholder]="'工序状态'" name="工序状态" class="me-2" [options]="options"
                  [(ngModel)]="JobOrderStatus"></d-select>
                <d-select [placeholder]="'是否委外'" name="是否委外" class="me-2" [options]="weiWaiOptions"
                  [(ngModel)]="weiwai"></d-select>
                <input dTextInput style="width: 180px;" [error]="false" placeholder="产品编码" name="产品编码" class="me-2"
                  [(ngModel)]="PartNum">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="产品名称" name="产品名称" class="me-2"
                  [(ngModel)]="PartName">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="工序编码" name="工序编码" class="me-2"
                  [(ngModel)]="ProcessNum">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="工序名称" name="工序名称" class="me-2"
                  [(ngModel)]="ProcessName">
                <div class="d-submit">
                  <d-button id="primaryBtn" (click)="search()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
                  <d-button bsStyle="common" (click)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
                </div>
              </div>
            </div>
            <div class="btn-group">
              <div class="btn-left">
                <d-button bsstyle="primaryBtn" (btnClick)="dispatch()">分配人员</d-button>
                <d-button bsStyle="common" (btnClick)="printSelected()"><i class="icon icon-print me-2"></i>打印</d-button>
              </div>
            </div>
          </d-col>
        </d-row>
      </div>
      <div class="list-content">
        <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
          [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
          (checkAllChange)="checkAllChange()" [resizeable]="true">
          <thead dTableHead [checkable]="true">
            <tr dTableRow>
              <th dHeadCell [fixedLeft]="'80px'">
                <span>操作</span>
              </th>
              <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">
                {{colOption.header}}</th>
            </tr>
          </thead>
          <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
              <tr>
                <td dTableCell [fixedLeft]="'0px'">
                  <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                    [ngModel]="rowItem.$checked && (rowItem.$checked || rowItem.$halfChecked)" dTooltip
                    [showGlowStyle]="false"
                    (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
                </td>
                <td dTableCell [fixedLeft]="'80px'">
                  <span><a class="devui-link me-2" [class.disabled]="rowItem.isOutsourcing"
                      (click)="dispatch(rowItem)">分配人员</a></span>
                  <span><a class="devui-link-danger" (click)="revokeAssign(rowItem)"
                      [class.disabled]="!rowItem.isAssign || rowItem.isOutsourcing">全部撤回</a></span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.jobOrderNum">{{rowItem.jobOrderNum}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.jobOrderNum + '-' + rowItem.processNumber">{{rowItem.jobOrderNum}}-{{rowItem.processNumber | padNumber}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.processNum">{{rowItem.processNum}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.processName">{{rowItem.processName}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.productNum">{{rowItem.productNum}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.productName">{{rowItem.productName}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.partType">{{rowItem.partType}}</span>
                </td>
                <td dTableCell dTooltip [content]="getNames(rowItem)">
                  <span>{{ getNames(rowItem) }}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.isOutsourcing ? '委外' : '自制'">
                    <d-tag [tag]="!rowItem?.isOutsourcing | booleanToText :'自制':'委外'" [labelStyle]="rowItem?.isOutsourcing | booleanToText:'false':'true'"></d-tag>
                  </span>
                </td>
                <td dTableCell>
                  <span *ngIf="rowItem.isAssign" class="me-3">
                    <div style="display: inline-block;">
                      <d-badge [showDot]="true" status="success" class="me-2"> </d-badge>
                      <span dTooltip [content]="'已派工'">已派工</span>
                    </div>
                  </span>
                  <span *ngIf="!rowItem.isAssign" class="me-3">
                    <div style="display: inline-block;">
                      <d-badge [showDot]="true" status="waiting" class="me-2"> </d-badge>
                      <span dTooltip [content]="'未派工'">未派工</span>
                    </div>
                  </span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.productionQuantity">{{rowItem.productionQuantity}}</span>
                </td>
                <td dTableCell>
                  <d-progress dTooltip [content]="((rowItem.qualifiedAmount / rowItem.productionQuantity) * 100 || 0).toFixed(2) + '%'" [percentage]="(rowItem.qualifiedAmount / rowItem.productionQuantity) * 100">
                    <ng-template [dPosition]="'center'">
                      <div class="overflow-ellipsis">
                        {{ rowItem.qualifiedAmount }}/{{rowItem.productionQuantity}}
                      </div>
                    </ng-template>
                  </d-progress>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="(rowItem.productionQuantity - rowItem.qualifiedAmount).toString()">{{rowItem.productionQuantity - rowItem.qualifiedAmount}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.planStartTime">{{rowItem.planStartTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                </td>
                <td dTableCell>
                  <span dTooltip [content]="rowItem.planFinishTime">{{rowItem.planFinishTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </d-data-table>
      </div>
      <div class="page-footer">
        <div>
          <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
            <a (click)="cleared()" class="clear">清空</a>
          </p>
        </div>
        <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
          [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
          [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
          (pageSizeChange)="pageSizeChange($event)">
        </d-pagination>
      </div>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
